<script setup lang="ts">
import SvgIcon from "@/components/svg-icon/index.vue";
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {useUserInfoStore} from "@/stores/user_info";
import {login} from "@/api/user";
import {ElNotification} from 'element-plus'
import router from "@/router";

const userInfoStore = useUserInfoStore()

let form = reactive({
  username: '',
  password: ''
})
let remember = ref(false)
const ruleFormRef = ref<FormInstance>()
const $router = useRouter()
const route = useRoute()

// console.log(route.query.redirect)

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      login(form).then((res: any) => {
        userInfoStore.token = res.token

        userInfoStore.selectUserInfo()

        if (route.query.redirect) {
          $router.push({
            path: route.query.redirect as string
          })
        } else {
          $router.push({
            path: '/'
          })
        }
        ElNotification({
          message: "登录成功",
          duration: 1500,
          type: 'success',
        })
      })
    }
  })
}

interface RuleForm {
  username: string,
  password: string
}

const rules = reactive<FormRules<RuleForm>>({
  username: [
    {required: true, message: '请输入账号', trigger: 'blur'},
    {min: 3, max: 20, message: '账号长度在3到10个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 5, max: 15, message: '密码长度在6到15个字符', trigger: 'blur'}
  ]
})

const toRegister = () => {
  router.replace({
    path: '/register'
  })
}

</script>

<template>
  <div class="layout">
    <div class="login-layout">
      <svg-icon class="icon" name="login-icon1"></svg-icon>
      <div class="login-box">
        <div class="login-text-1">
          欢迎登录
        </div>
        <div class="icon-1"></div>
        <el-form ref="ruleFormRef" :model="form" :rules="rules"
                 style="max-width: 600px;margin-top: 75px">
          <el-form-item prop="username">
            <input class="input" v-model="form.username" placeholder="请输入账号"/>
          </el-form-item>
          <el-form-item prop="password" style="margin-top: 32px">
            <input class="input" v-model="form.password" placeholder="请输入密码" type="password"/>
          </el-form-item>
          <el-form-item>
            <div class="remember">
              <el-checkbox v-model="remember" label="记住密码" size="large"/>
              <el-link type="primary">忘记密码</el-link>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
          </el-form-item>
          <el-form-item>
            <div style="width: 100%;text-align: center">
              登录即视为同意<span style="color: #409EFF">《服务协议》</span>
            </div>
          </el-form-item>
          <el-form-item>
            <div @click="toRegister" style="width: 100%;text-align: center;cursor: pointer">
              还未注册？去注册
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout:before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: url("@/assets/images/login-back.png") center / cover no-repeat;
  filter: blur(5px);
  z-index: -1;
}

.layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: initial;
  align-items: center;
  justify-content: center;

  .login-layout {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .remember {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
  }

  .login-btn {
    width: 100%;
    border-radius: 50px;
    height: 40px;
    margin-top: 40px;
  }

  .icon-1 {
    width: 79px;
    margin: 3px auto;
    height: 5px;
    opacity: 1;
    background: rgba(69, 131, 250, 1);

  }

  .input {
    border: 1px solid aliceblue;
    padding: 10px;
    width: 100%;
    border-radius: 100px;
    background: #DBEDFF;
  }

  .input:focus {
    outline: none;
    background: #DBEDFF;
  }

  .input::placeholder {
    color: #C4C4C4;
  }

  .icon {
    //position: absolute;
    z-index: 1;
    left: 237px;
    top: 210px;
    width: 750px;
    height: 500px;
    opacity: 1;
  }

  .login-box {
    //position: absolute;
    left: 1000px;
    top: 140px;
    width: 517px;
    height: 600px;
    opacity: 1;
    padding: 0 100px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 1);
  }

  .login-text-1 {
    height: 30px;
    margin-top: 70px;
    opacity: 1;
    /** 文本1 */
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 30px;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    vertical-align: top;
  }

}
</style>